<template>
  <div class="order-container" >
    <!-- 车次信息卡片 -->
    <div class="train-card" v-if="!orderConfirmed">
      <div class="train-header">
        <div class="train-badge">{{ dailyTrainTicket.trainCode }}次</div>
        <div class="train-info">
          <h2 class="train-title">{{ dailyTrainTicket.trainCode }}次列车</h2>
          <div class="train-date">{{ dailyTrainTicket.date }}</div>
        </div>
        <div class="train-status">正在售票</div>
      </div>

      <div class="route-info">
        <div class="station start">
          <div class="station-name">{{ dailyTrainTicket.start }}站</div>
          <div class="station-time">{{ dailyTrainTicket.startTime }}</div>
        </div>

        <div class="route-line">
          <div class="line"></div>
          <div class="duration">约{{ calculateDuration() }}</div>
        </div>

        <div class="station end">
          <div class="station-name">{{ dailyTrainTicket.end }}站</div>
          <div class="station-time">{{ dailyTrainTicket.endTime }}</div>
        </div>
      </div>

      <!-- 车票类型展示 -->
      <div class="ticket-types">
        <div
            class="ticket-type"
            v-for="item in seatTypes"
            :key="item.type"
            :class="{'ticket-highlight': item.count > 0}"
        >
          <div class="ticket-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 9.5H4.5M7 9.5H22M2 14.5H4.5M7 14.5H22M4.5 7V17C4.5 17.5523 4.94772 18 5.5 18H18.5C19.0523 18 19.5 17.5523 19.5 17V7C19.5 6.44772 19.0523 6 18.5 6H5.5C4.94772 6 4.5 6.44772 4.5 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
          </div>
          <div class="ticket-details">
            <div class="ticket-desc">{{ item.desc }}</div>
            <div class="ticket-price">{{ item.price }}￥</div>
            <div class="ticket-count" :class="{'low-stock': item.count < 10}">余票: {{ item.count }}张</div>
          </div>
        </div>
      </div>
    </div>

    <a-divider class="custom-divider" v-if="!orderConfirmed"></a-divider>

    <!-- 乘客选择区域 -->
    <div class="passenger-section" v-if="!orderConfirmed">
      <div class="section-header">
        <div class="header-icon">
          <user-outlined />
        </div>
        <h3>选择乘车乘客</h3>
        <span class="section-subtitle">（最多选择5人）</span>
      </div>

      <div class="passenger-selector">
        <a-checkbox-group v-model:value="passengerChecks" :options="passengerOptions" class="passenger-grid" />
      </div>
    </div>

    <!-- 购票列表 -->
    <div class="ticket-list" v-if="tickets.length > 0 && !orderConfirmed">
      <div class="section-header">
        <div class="header-icon">
          <ordered-list-outlined />
        </div>
        <h3>购票信息</h3>
      </div>

      <div class="tickets-table">
        <div class="tickets-header">
          <div class="col-passenger">乘客</div>
          <div class="col-id">身份证</div>
          <div class="col-type">票种</div>
          <div class="col-seat">座位类型</div>
        </div>

        <div class="tickets-row" v-for="(ticket, index) in tickets" :key="ticket.passengerId">
          <div class="col-passenger">
            <user-outlined class="row-icon" />
            <span class="passenger-name">{{ ticket.passengerName }}</span>
          </div>
          <div class="col-id">{{ formatIdCard(ticket.passengerIdCard) }}</div>
          <div class="col-type">
            <a-select v-model:value="ticket.passengerType" class="custom-select">
              <a-select-option v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code" :value="item.code">
                {{ item.desc }}
              </a-select-option>
            </a-select>
          </div>
          <div class="col-seat">
            <a-select v-model:value="ticket.seatTypeCode" class="custom-select">
              <a-select-option v-for="item in seatTypes" :key="item.code" :value="item.code">
                {{ item.desc }}
              </a-select-option>
            </a-select>
          </div>
        </div>
      </div>

      <div class="submit-section">
        <a-button type="primary" size="large" @click="finishCheckPassenger" class="submit-btn">
          <check-outlined />
          提交订单
        </a-button>
      </div>
    </div>

    <!-- 确认模态框 -->
    <a-modal v-model:visible="visible" title="请核对以下信息"
             class="confirm-modal"
             @ok="handleOk"
             ok-text="确认" cancel-text="取消"
             v-if="!orderConfirmed">
      <div class="tickets-table">
        <div class="tickets-header">
          <div class="col-passenger">乘客</div>
          <div class="col-id">身份证</div>
          <div class="col-type">票种</div>
          <div class="col-seat">座位类型</div>
        </div>

        <div class="tickets-row" v-for="ticket in tickets" :key="ticket.passengerId">
          <div class="col-passenger">
            <user-outlined class="row-icon" />
            <span class="passenger-name">{{ ticket.passengerName }}</span>
          </div>
          <div class="col-id">{{ formatIdCard(ticket.passengerIdCard) }}</div>
          <div class="col-type">
            <span v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code">
              <span v-if="item.code === ticket.passengerType">{{ item.desc }}</span>
            </span>
          </div>
          <div class="col-seat">
            <span v-for="item in seatTypes" :key="item.code">
              <span v-if="item.code === ticket.seatTypeCode">{{ item.desc }}</span>
            </span>
          </div>
        </div>

        <div class="seat-selection-section">
          <div v-if="chooseSeatType === 0" class="seat-notice">
            <div class="notice-header">
              <exclamation-circle-filled class="warning-icon" />
              <span>您购买的车票不支持选座</span>
            </div>
            <div class="notice-content">
              <div>12306规则：只有全部是一等座或全部是二等座才支持选座</div>
              <div>12306规则：余票小于一定数量时，不允许选座</div>
            </div>
          </div>
          <div v-else class="seat-selection">
            <div class="seat-selection-header">
              <div class="seat-type">选择{{ chooseSeatType === 1 ? '一等座' : '二等座' }}座位</div>
              <div class="seat-hint">提示：您可以选择{{tickets.length}}个座位</div>
            </div>
            <div class="seat-grid">
              <div class="seat-row" v-for="row in [1, 2]" :key="row">
                <div class="seat-label">第{{ row }}排</div>
                <div class="seat-options">
                  <div
                      class="seat-item"
                      v-for="item in SEAT_COL_ARRAY"
                      :key="item.code"
                      :class="{'seat-selected': chooseSeatObj[item.code + row]}"
                      @click="toggleSeat(item.code + row)"
                  >
                    {{ item.desc }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="order-summary">
          <div class="summary-item">
            <span>车票总数：</span>
            <span class="summary-value">{{ tickets.length }}张</span>
          </div>
          <div class="summary-item">
            <span>总金额：</span>
            <span class="summary-value price">¥{{ calculateTotalPrice() }}</span>
          </div>
        </div>
      </div>
    </a-modal>
    <div class="confirmation-container" v-if="orderConfirmed">
      <div class="confirmation-card">
        <div class="confirmation-header">
          <check-circle-filled class="success-icon" />
          <h2>订单创建成功！</h2>
          <p class="order-number">订单号：{{ orderData.orderSn }}</p>
        </div>

        <div class="order-summary">
          <div class="summary-item">
            <span>车次信息：</span>
            <span class="summary-value">{{ orderData.trainCode }}次 {{ orderData.start }} → {{ orderData.end }}</span>
          </div>
          <div class="summary-item">
            <span>出发时间：</span>
            <span class="summary-value">{{ orderData.date }} {{ orderData.startTime }}</span>
          </div>
          <div class="summary-item">
            <span>乘车日期：</span>
            <span class="summary-value">{{ orderData.date }}</span>
          </div>
          <div class="summary-item">
            <span>总金额：</span>
            <span class="summary-value price">¥{{ orderData.totalPrice }}</span>
          </div>
          <div class="summary-item">
            <span>支付状态：</span>
            <span class="summary-value status-unpaid">待支付</span>
          </div>
        </div>

        <div class="ticket-details">
          <h3 class="section-title">车票详情</h3>
          <div class="tickets-table">
            <div class="tickets-header">
              <div class="col-passenger">乘客</div>
              <div class="col-type">票种</div>
              <div class="col-seat">座位</div>
              <div class="col-price">票价</div>
            </div>

            <div class="tickets-row" v-for="ticket in orderData.tickets" :key="ticket.passengerId">
              <div class="col-passenger">
                <user-outlined class="row-icon" />
                <div class="passenger-info">
                  <div class="passenger-name">{{ ticket.passengerName }}</div>
                  <div class="passenger-id">{{ formatIdCard(ticket.passengerIdCard) }}</div>
                </div>
              </div>
              <div class="col-type">
                <span v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code">
                  <span v-if="item.code === ticket.passengerType">{{ item.desc }}</span>
                </span>
              </div>
              <div class="col-seat">
                <span class="seat-info" v-if="ticket.seat">
                  {{ ticket.carriage }}车{{ ticket.seat }}
                </span>
                <span v-else>系统分配</span>
              </div>
              <div class="col-price">
                ¥{{ ticket.price }}
              </div>
            </div>
          </div>
        </div>

        <div class="payment-section">
          <h3 class="section-title">支付方式</h3>
          <div class="payment-methods">
            <div class="payment-method"
                 v-for="method in paymentMethods"
                 :key="method.id"
                 :class="{'selected': selectedMethod === method.id}"
                 @click="selectedMethod = method.id">
              <div class="method-icon">
                <component :is="method.icon" />
              </div>
              <div class="method-name">{{ method.name }}</div>
            </div>
          </div>

          <div class="payment-actions">
            <a-button class="action-btn" @click="orderConfirmed = false">返回修改</a-button>
            <a-button type="primary" class="action-btn pay-btn" @click="handlePayment">
              <template #icon><credit-card-outlined /></template>
              立即支付 ¥{{ orderData.totalPrice }}
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, watch,computed } from 'vue';
import router from "@/router";
import axios from "axios";
import { notification } from "ant-design-vue";
import {
  UserOutlined,
  OrderedListOutlined,
  CheckOutlined,
  ExclamationCircleFilled,
  CheckCircleFilled,
  CreditCardOutlined,
  WechatOutlined,
  AlipayCircleOutlined,
  BankOutlined
} from '@ant-design/icons-vue';

export default defineComponent({
  name: "order-view",
  components: {
    UserOutlined,
    OrderedListOutlined,
    CheckOutlined,
    ExclamationCircleFilled,
    CheckCircleFilled,
    CreditCardOutlined,
    WechatOutlined,
    AlipayCircleOutlined,
    BankOutlined
  },
  setup() {
    const passengers = ref([]);
    const passengerOptions = ref([]);
    const passengerChecks = ref([]);
    const dailyTrainTicket = SessionStorage.get(SESSION_ORDER) || {};
    console.log("下单的车次信息", dailyTrainTicket);

    const orderConfirmed = ref(false);
    const selectedMethod = ref('alipay');
    const orderData = ref({
      orderSn: 'O20230806123456',
      trainCode: 'G123',
      start: '北京南',
      end: '上海虹桥',
      date: '2025-08-10',
      startTime: '08:30',
      totalPrice: 553.0,
      tickets: [
        {
          passengerId: '1',
          passengerName: '张三',
          passengerType: '1',
          passengerIdCard: '110101199001011234',
          seatTypeCode: '2',
          seat: '12A',
          carriage: '05',
          price: 553.0
        }
      ]
    });
    const paymentMethods = ref([
      { id: 'alipay', name: '支付宝', icon: 'AlipayCircleOutlined' },
      { id: 'wechat', name: '微信支付', icon: 'WechatOutlined' },
      { id: 'card', name: '银行卡', icon: 'BankOutlined' }
    ]);

    const SEAT_TYPE = window.SEAT_TYPE;
    console.log(SEAT_TYPE)

    const seatTypes = [];
    for (let KEY in SEAT_TYPE) {
      let key = KEY.toLowerCase();
      console.log("the value of key:",key);
      if (dailyTrainTicket[key] >= 0) {
        seatTypes.push({
          type: KEY,
          code: SEAT_TYPE[KEY]["code"],
          desc: SEAT_TYPE[KEY]["desc"],
          count: dailyTrainTicket[key],
          price: dailyTrainTicket[key + 'Price'],
        })
      }
    }
    console.log("车票信息：",dailyTrainTicket)
    console.log("本车次提供的座位：", seatTypes)

    const tickets = ref([]);
    const PASSENGER_TYPE_ARRAY = window.PASSENGER_TYPE_ARRAY;
    const visible = ref(false);

    // 计算行程时间
    const calculateDuration = () => {
      if (!dailyTrainTicket.startTime || !dailyTrainTicket.endTime) return '-';

      const start = new Date(`2000-01-01T${dailyTrainTicket.startTime}`);
      const end = new Date(`2000-01-01T${dailyTrainTicket.endTime}`);
      if (end < start) end.setDate(end.getDate() + 1);

      const diff = Math.abs(end - start);
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

      return `${hours}小时${minutes}分`;
    };

    // 格式化身份证显示
    const formatIdCard = (id) => {
      if (!id || id.length !== 18) return id;
      return `${id.substring(0, 6)}****${id.substring(14)}`;
    };

    watch(() => passengerChecks.value, (newVal, oldVal) => {
      console.log("勾选乘客发生变化", newVal, oldVal)
      tickets.value = [];
      passengerChecks.value.forEach((item) => tickets.value.push({
        passengerId: item.id,
        passengerType: item.type,
        seatTypeCode: seatTypes[0].code,
        passengerName: item.name,
        passengerIdCard: item.idCard
      }))
    }, { immediate: true });

    // 0：不支持选座；1：选一等座；2：选二等座
    const chooseSeatType = ref(0);
    // 根据选择的座位类型，计算出对应的列，比如要选的是一等座，就筛选出ACDF，要选的是二等座，就筛选出ABCDF
    const SEAT_COL_ARRAY = computed(() => {
      return window.SEAT_COL_ARRAY.filter(item => item.type === chooseSeatType.value);
    });
    // 选择的座位
    // {
    //   A1: false, C1: true，D1: false, F1: false，
    //   A2: false, C2: false，D2: true, F2: false
    // }
    const chooseSeatObj = ref({});
    watch(() => SEAT_COL_ARRAY.value, () => {
      for (let i = 1; i <= 2; i++) {
        SEAT_COL_ARRAY.value.forEach((item) => {
          chooseSeatObj.value[item.code + i] = false;
        })
      }
      console.log("初始化两排座位，都是未选中：", chooseSeatObj.value);
    }, {immediate: true});


    let data=null;
    const handleQueryPassenger = () => {
      axios.get("/member/passenger/query-mine").then((response) => {
        data = response.data;
        if (data.success) {
          passengers.value = data.content;
          passengers.value.forEach((item) => passengerOptions.value.push({
            label: item.name,
            value: item
          }))
        } else {
          notification.error({ description: data.message });
        }
      });
    };

    const finishCheckPassenger = () => {
      console.log("购票列表：", tickets.value);

      if (tickets.value.length > 5) {
        notification.error({ description: '最多只能购买5张车票' });
        return;
      }

      // 校验余票是否充足，购票列表中的每个座位类型，都去车次座位余票信息中，看余票是否充足
      // 前端校验不一定准，但前端校验可以减轻后端很多压力
      // 注意：这段只是校验，必须copy出seatTypesTemp变量来扣减，用原始的seatTypes去扣减，会影响真实的库存
      let seatTypesTemp = Tool.copy(seatTypes);
      for (let i = 0; i < tickets.value.length; i++) {
        let ticket = tickets.value[i];
        for (let j = 0; j < seatTypesTemp.length; j++) {
          let seatType = seatTypesTemp[j];
          // 同类型座位余票-1，这里扣减的是临时copy出来的库存，不是真正的库存，只是为了校验
          if (ticket.seatTypeCode === seatType.code) {
            seatType.count--;
            if (seatType.count < 0) {
              notification.error({description: seatType.desc + '余票不足'});
              return;
            }
          }
        }
      }
      console.log("前端余票校验通过");

      // 判断是否支持选座，只有纯一等座和纯二等座支持选座
      // 先筛选出购票列表中的所有座位类型，比如四张表：[1, 1, 2, 2]
      let ticketSeatTypeCodes = [];
      for (let i = 0; i < tickets.value.length; i++) {
        let ticket = tickets.value[i];
        ticketSeatTypeCodes.push(ticket.seatTypeCode);
      }
      // 为购票列表中的所有座位类型去重：[1, 2]
      const ticketSeatTypeCodesSet = Array.from(new Set(ticketSeatTypeCodes));
      console.log("选好的座位类型：", ticketSeatTypeCodesSet);
      if (ticketSeatTypeCodesSet.length !== 1) {
        console.log("选了多种座位，不支持选座");
        chooseSeatType.value = 0;
      } else {
        // ticketSeatTypeCodesSet.length === 1，即只选择了一种座位（不是一个座位，是一种座位）
        if (ticketSeatTypeCodesSet[0] === SEAT_TYPE.YDZ.code) {
          console.log("一等座选座");
          chooseSeatType.value = SEAT_TYPE.YDZ.code;
        } else if (ticketSeatTypeCodesSet[0] === SEAT_TYPE.EDZ.code) {
          console.log("二等座选座");
          chooseSeatType.value = SEAT_TYPE.EDZ.code;
        } else {
          console.log("不是一等座或二等座，不支持选座");
          chooseSeatType.value = 0;
        }
      }

      // 余票小于20张时，不允许选座，否则选座成功率不高，影响出票
      if (chooseSeatType.value !== 0) {
        for (let i = 0; i < seatTypes.length; i++) {
          let seatType = seatTypes[i];
          // 找到同类型座位
          if (ticketSeatTypeCodesSet[0] === seatType.code) {
            // 判断余票，小于20张就不支持选座
            if (seatType.count < 20) {
              console.log("余票小于20张就不支持选座")
              chooseSeatType.value = 0;
              break;
            }
          }
        }
      }

      // 弹出确认界面
      visible.value = true;
    };

    const handleOk = () => {
      console.log("选好的座位：", chooseSeatObj.value);

      // 设置每张票的座位
      // 先清空购票列表的座位，有可能之前选了并设置座位了，但选座数不对被拦截了，又重新选一遍
      for (let i = 0; i < tickets.value.length; i++) {
        tickets.value[i].seat = null;
      }
      let i = -1;
      // 要么不选座位，要么所选座位应该等于购票数，即i === (tickets.value.length - 1)
      for (let key in chooseSeatObj.value) {
        if (chooseSeatObj.value[key]) {
          i++;
          if (i > tickets.value.length - 1) {
            notification.error({description: '所选座位数大于购票数'});
            return;
          }
          tickets.value[i].seat = key;
        }
      }
      if (i > -1 && i < (tickets.value.length - 1)) {
        notification.error({description: '所选座位数小于购票数'});
        return;
      }

      orderConfirmed.value = true;

      console.log("最终购票：", tickets.value);

      console.log("会员ID是：",data.content[0].mid);
      axios.post("/business/confirm_Order/do", {
        memberId:data.content[0].mid,
        dailyTrainTicketId: dailyTrainTicket.id,
        date: dailyTrainTicket.date,
        trainCode: dailyTrainTicket.trainCode,
        start: dailyTrainTicket.start,
        end: dailyTrainTicket.end,
        tickets: tickets.value
      }).then((response) => {
        let dataConfirm = response.data;
        if (dataConfirm.success) {
          notification.success({description: "下单成功！"});
        } else {
          notification.error({description: dataConfirm.message});
        }
      });

      // 准备订单数据
      const orderData = {
        dailyTrainTicket: dailyTrainTicket,
        tickets: tickets.value,
        totalPrice: calculateTotalPrice(),
        selectedSeats: getSelectedSeats(),
        orderTime: new Date().toISOString(),
        orderNumber: generateOrderNumber()
      };

      // 存储订单数据到sessionStorage，支付页面会读取
      sessionStorage.setItem('trainOrderData', JSON.stringify(orderData));

      // 跳转到支付页面
      router.push("/payment");
    };
    // 添加辅助函数
    const getSelectedSeats = () => {
      const selected = [];
      for (let key in chooseSeatObj.value) {
        if (chooseSeatObj.value[key]) {
          selected.push(key);
        }
      }
      return selected;
    };

    const generateOrderNumber = () => {
      return 'T' + Date.now() + Math.floor(Math.random() * 1000);
    };


    const calculateTotalPrice = () => {
      let total = 0;
      tickets.value.forEach(ticket => {
        // const passengerType=passengerTypes.find(st => st.code === ticket.seatTypeCode);
        const seatType = seatTypes.find(st => st.code === ticket.seatTypeCode);
        if (seatType) {
          total += parseFloat(seatType.price);
        }
      });
      return total.toFixed(2);
    };

    // 添加选座切换函数
    const toggleSeat = (seatCode) => {
      chooseSeatObj.value[seatCode] = !chooseSeatObj.value[seatCode];
    };


    const handlePayment = () => {
      notification.success({
        message: '支付成功',
        description: `您已成功支付 ¥${orderData.value.totalPrice}，车票已出票`
      });

      // 在实际项目中，这里会调用支付API
      // 支付成功后可以跳转到订单详情或车票页面
    };

    onMounted(() => {
      handleQueryPassenger();
    });

    return {
      passengers,
      dailyTrainTicket,
      seatTypes,
      passengerOptions,
      passengerChecks,
      tickets,
      PASSENGER_TYPE_ARRAY,
      visible,
      finishCheckPassenger,
      calculateDuration,
      formatIdCard,
      chooseSeatType,
      chooseSeatObj,
      SEAT_COL_ARRAY,
      handleOk,
      calculateTotalPrice,
      toggleSeat,
      orderConfirmed,
      orderData,
      paymentMethods,
      selectedMethod,
      handlePayment
    };
  },
});
</script>
<style scoped>
.confirmation-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.confirmation-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 30px;
  border: 1px solid #e8e8e8;
}

.confirmation-header {
  text-align: center;
  padding: 20px 0 30px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 30px;
}

.confirmation-header h2 {
  font-size: 28px;
  color: #1890ff;
  margin: 15px 0 10px;
  font-weight: 600;
}

.success-icon {
  font-size: 60px;
  color: #52c41a;
}

.order-number {
  color: #666;
  font-size: 16px;
  margin-top: 5px;
}

.order-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 10px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed #e8e8e8;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item span:first-child {
  color: #666;
}

.summary-value {
  font-weight: 500;
}

.price {
  color: #f5222d;
  font-size: 18px;
  font-weight: 600;
}

.status-unpaid {
  color: #faad14;
  font-weight: 600;
}

.section-title {
  position: relative;
  padding-left: 12px;
  font-size: 18px;
  margin: 30px 0 20px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: #1890ff;
  border-radius: 2px;
}

.tickets-table {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.tickets-header {
  display: flex;
  background: #f7fafc;
  color: #4a5568;
  font-weight: 600;
  padding: 15px 20px;
  border-bottom: 1px solid #e8e8e8;
}

.tickets-row {
  display: flex;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}

.tickets-row:last-child {
  border-bottom: none;
}

.col-passenger {
  flex: 3;
  display: flex;
  align-items: center;
}

.col-type, .col-seat, .col-price {
  flex: 2;
  text-align: center;
}

.row-icon {
  margin-right: 10px;
  color: #1890ff;
  font-size: 18px;
}

.passenger-info {
  text-align: left;
}

.passenger-name {
  font-weight: 500;
  margin-bottom: 3px;
}

.passenger-id {
  color: #666;
  font-size: 13px;
}

.seat-info {
  background: #e6f7ff;
  color: #1890ff;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 500;
}

.payment-methods {
  display: flex;
  gap: 20px;
  margin: 20px 0 30px;
}

.payment-method {
  flex: 1;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-method:hover {
  border-color: #1890ff;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.payment-method.selected {
  border-color: #1890ff;
  background: #e6f7ff;
}

.method-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.method-icon :deep(svg) {
  color: #1890ff;
}

.payment-method.selected .method-icon :deep(svg) {
  color: #096dd9;
}

.method-name {
  font-weight: 500;
}

.payment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.action-btn {
  height: 48px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
}

.pay-btn {
  background: linear-gradient(135deg, #ff4d4f, #f5222d);
  border: none;
  box-shadow: 0 4px 12px rgba(245, 34, 45, 0.3);
  transition: all 0.3s ease;
}

.pay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(245, 34, 45, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .confirmation-card {
    padding: 20px;
  }

  .order-summary {
    grid-template-columns: 1fr;
  }

  .payment-methods {
    flex-direction: column;
  }

  .tickets-header, .tickets-row {
    flex-direction: column;
    gap: 15px;
  }

  .col-passenger, .col-type, .col-seat, .col-price {
    width: 100%;
    text-align: left;
  }

  .payment-actions {
    flex-direction: column;
  }

  .action-btn {
    width: 100%;
  }
}

  .order-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: #2d3748;
    background: #f9fafb;
    border-radius: 12px;
  }

  /* 车次信息卡片 */
  .train-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .train-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }

  .train-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #edf2f7;
  }

  .train-badge {
    background: #3182ce;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  .train-info {
    flex: 1;
    padding: 0 20px;
  }

  .train-title {
    font-size: 24px;
    color: #2d3748;
    margin: 0 0 5px 0;
    font-weight: 700;
  }

  .train-date {
    color: #718096;
    font-size: 15px;
    font-weight: 500;
  }

  .train-status {
    background: #e6f7ff;
    color: #1890ff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
  }

  .route-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0;
    position: relative;
  }

  .station {
    flex: 1;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    background: #f7fafc;
    position: relative;
    z-index: 2;
  }

  .station.start {
    border: 1px solid #c3dafe;
  }

  .station.end {
    border: 1px solid #fed7d7;
  }

  .station-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #2d3748;
  }

  .station-time {
    color: #4a5568;
    font-size: 16px;
    font-weight: 500;
  }

  .route-line {
    flex: 1;
    position: relative;
    text-align: center;
    z-index: 1;
  }

  .line {
    height: 2px;
    background: linear-gradient(to right, #4299e1, #f56565);
    margin: 0 10px;
    position: relative;
  }

  .line::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    width: 8px;
    height: 8px;
    background: #4299e1;
    border-radius: 50%;
  }

  .line::after {
    content: '';
    position: absolute;
    top: -3px;
    right: 0;
    width: 8px;
    height: 8px;
    background: #f56565;
    border-radius: 50%;
  }

  .duration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 5px 15px;
    color: #4a5568;
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .ticket-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 25px;
  }

  .ticket-type {
    background: white;
    border-radius: 10px;
    padding: 15px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
  }

  .ticket-highlight {
    border-left: 4px solid #4299e1;
    box-shadow: 0 4px 6px rgba(66, 153, 225, 0.15);
  }

  .ticket-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #ebf8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4299e1;
    flex-shrink: 0;
  }

  .ticket-details {
    flex: 1;
  }

  .ticket-desc {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 3px;
    color: #2d3748;
  }

  .ticket-price {
    color: #dd6b20;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 3px;
  }

  .ticket-count {
    color: #718096;
    font-size: 14px;
  }

  .low-stock {
    color: #e53e3e;
    font-weight: 500;
  }

  /* 分割线样式 */
  .custom-divider {
    margin: 30px 0;
    border-top: 1px solid #e2e8f0;
  }

  /* 乘客选择区域 */
  .passenger-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #e2e8f0;
  }

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
  }

  .header-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ebf8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4299e1;
    flex-shrink: 0;
  }

  .section-header h3 {
    margin: 0;
    font-size: 18px;
    color: #2d3748;
    font-weight: 600;
  }

  .section-subtitle {
    color: #718096;
    font-size: 14px;
    margin-left: 5px;
  }

  .passenger-selector {
    padding: 10px 0;
  }

  .passenger-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
  }

  /* 购票列表样式 */
  .ticket-list {
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #e2e8f0;
  }

  .tickets-table {
    border: 1px solid #edf2f7;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
  }

  .tickets-header {
    display: flex;
    background: #f7fafc;
    color: #4a5568;
    font-weight: 600;
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
  }

  .tickets-row {
    display: flex;
    padding: 15px 20px;
    border-bottom: 1px solid #edf2f7;
    transition: background 0.2s;
    align-items: center;
  }

  .tickets-row:last-child {
    border-bottom: none;
  }

  .tickets-row:hover {
    background: #f8fafc;
  }

  .col-passenger, .col-id, .col-type, .col-seat {
    padding: 0 10px;
  }

  .col-passenger {
    flex: 2;
    display: flex;
    align-items: center;
  }

  .row-icon {
    margin-right: 8px;
    color: #4299e1;
  }

  .passenger-name {
    font-weight: 500;
  }

  .col-id {
    flex: 6;
    color: #4a5568;
    font-size: 14px;
  }

  .col-type {
    flex: 4;
  }

  .col-seat {
    flex: 4;
  }

  .custom-select {
    width: 100%;
  }

  .submit-section {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }

  .submit-btn {
    padding: 0 40px;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    background: linear-gradient(135deg, #4299e1, #3182ce);
    border: none;
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4);
    transition: all 0.3s ease;
  }

  .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(66, 153, 225, 0.5);
  }

  /* 确认模态框 */
  .confirm-modal :deep(.ant-modal-content) {
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
  }

  .confirm-modal :deep(.ant-modal-header) {
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 20px 24px;
  }

  .confirm-modal :deep(.ant-modal-title) {
    font-weight: 700;
    color: #2d3748;
    font-size: 18px;
  }

  .confirm-modal :deep(.ant-modal-body) {
    padding: 24px;
  }

  .seat-selection-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #e2e8f0;
  }

  .seat-notice {
    background: #fffaf0;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #fed7d7;
  }

  .notice-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #e53e3e;
    font-weight: 600;
  }

  .warning-icon {
    font-size: 18px;
  }

  .notice-content {
    color: #718096;
    font-size: 14px;
    line-height: 1.6;
  }

  .seat-selection {
    background: #f7fafc;
    border-radius: 10px;
    padding: 20px;
  }

  .seat-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }

  .seat-type {
    font-weight: 600;
    color: #2d3748;
    font-size: 16px;
  }

  .seat-hint {
    color: #718096;
    font-size: 14px;
  }

  .seat-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .seat-row {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .seat-label {
    width: 60px;
    color: #718096;
    font-size: 14px;
  }

  .seat-options {
    display: flex;
    gap: 10px;
  }

  .seat-item {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf2f7;
    color: #4a5568;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
  }

  .seat-item:hover {
    background: #e2e8f0;
  }

  .seat-selected {
    background: #4299e1;
    color: white;
    border-color: #4299e1;
    box-shadow: 0 2px 6px rgba(66, 153, 225, 0.4);
  }

  .order-summary {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #e2e8f0;
  }

  .summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #4a5568;
  }

  .summary-value {
    font-weight: 600;
    color: #2d3748;
  }

  .price {
    font-size: 20px;
    color: #dd6b20;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .order-container {
      padding: 15px;
    }

    .train-header {
      flex-direction: column;
      gap: 15px;
      text-align: center;
    }

    .route-info {
      flex-direction: column;
      gap: 20px;
    }

    .station {
      width: 100%;
      margin-bottom: 0;
    }

    .route-line {
      width: 100%;
      margin: 15px 0;
    }

    .ticket-types {
      grid-template-columns: 1fr;
    }

    .tickets-header, .tickets-row {
      flex-direction: column;
      gap: 15px;
    }

    .col-passenger, .col-id, .col-type, .col-seat {
      padding: 8px 0;
      width: 100%;
    }

    .seat-row {
      flex-direction: column;
      align-items: flex-start;
    }

    .order-summary {
      flex-direction: column;
      gap: 10px;
      align-items: flex-end;
    }
  }
</style>